<template>
  <div class="table-wrapped">
    <!-- 顶部 -->
    <div class="table-top">
      <!-- 表格顶部 -->
      <div class="table-header">
        <!-- 搜索框 -->
        <div class="search-wrapped">
          <el-input
            v-model="adminAccount"
            class="w-50 m-2"
            size="large"
            placeholder="输入账号进行搜索"
            :prefix-icon="Search"
            @change="searchAdmin()"
            clearable
            @clear="clearInput()"
          />
        </div>
        <div class="button-wrapped">
          <el-button type="primary" @click="openCreate(1)"
            >添加产品管理员</el-button
          >
        </div>
      </div>
      <!-- 表格内容 -->
      <div class="table-content">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" width="50" />
          <el-table-column prop="account" label="账号" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="sex" label="性别" />
          <el-table-column prop="department" label="部门" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="update_time" label="更新时间">
            <template #default="{ row }">
              <div>{{ row.update_time?.slice(0, 10) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <!-- 插槽 -->
            <template #default="{ row }">
              <div class="editAndDel">
                <el-button type="success" @click="openEdit(row.id)"
                  >编辑</el-button
                >
                <el-button type="danger" @click="openDelete(row.id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 底部 -->
    <div class="table-footer">
      <el-pagination
        :page-size="1"
        :current-page="paginationData.currentPage"
        :pager-count="7"
        :total="adminTotal"
        :page-count="paginationData.pageCount"
        @current-change="currentChange"
        layout="prev, pager, next"
      />
    </div>
  </div>
  <create ref="Create" @success="getAdminList"></create>
  <edit ref="Edit" @success="getAdminList"></edit>
  <deleteA ref="Delete" @success="getAdminList"></deleteA>
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeUnmount } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { bus } from '@/utils/mitt.js'
import { getAdminListAPI } from '@/api/userInfo'
import create from '@/views/user_manage/components/create_admin.vue'
import edit from '@/views/user_manage/components/edit_admin.vue'
import deleteA from '@/views/user_manage/components/del_admin.vue'

// 搜索框的modelValue
const adminAccount = ref<number>()

// 表格内容
const tableData = ref()

// 搜索内容
const searchAdmin = async () => {}

// 分页数据
const paginationData = reactive({
  // 总页数
  pageCount: 1,
  // 当前所处页数
  currentPage: 1
})
const adminTotal = ref<number>(0)
// 获取管理员的数量
const getAdminList = async () => {
  const res = await getAdminListAPI('产品管理员')
  tableData.value = res.data
}
getAdminList()
// 默认获取第一页的数据
const getFirstPageList = async () => {}
getFirstPageList()
// 监听换页
const currentChange = async (value: number) => {}

// 当搜索内容清空后,返回当前页面的数据
const clearInput = async () => {}

bus.on('adminDialogOff', async (id: number) => {})

// 创建管理员
const Create = ref()
const openCreate = (id: number) => {
  bus.emit('createId', id)
  Create.value.open()
}
// 编辑管理员
const Edit = ref()
const openEdit = (id: number) => {
  bus.emit('editId', id)
  Edit.value.open()
}

// 降级管理员
const Delete = ref()
const openDelete = (id: number) => {
  bus.emit('deleteId', id)
  Delete.value.open()
}

onBeforeUnmount(() => {
  bus.all.clear()
})
</script>

<style lang="less" scoped></style>
